<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本框跑马灯渐变边框</title>
    <style>
        .gradient-input {
            width: 300px;
            height: 50px;
            padding: 0 15px;
            border: none;
            outline: none;
            
            /* 统一渐变方向：顶部/底部水平向右，左侧/右侧垂直向下 */
            background: 
                linear-gradient(90deg, #ff0000 20%, #00ff00 40%, #0000ff 60%, #ff0000 80%) top,    /* 顶部渐变 */
                linear-gradient(90deg, #ff0000 20%, #00ff00 40%, #0000ff 60%, #ff0000 80%) bottom, /* 底部渐变 */
                linear-gradient(180deg, #ff0000 20%, #00ff00 40%, #0000ff 60%, #ff0000 80%) left,   /* 左侧渐变（垂直向下） */
                linear-gradient(180deg, #ff0000 20%, #00ff00 40%, #0000ff 60%, #ff0000 80%) right;  /* 右侧渐变（垂直向下） */
            background-size: 200% 2px, 200% 2px, 2px 200%, 2px 200%; /* 扩展背景尺寸实现循环 */
            background-repeat: no-repeat;
            background-clip: border-box;
            
            /* 跑马灯动画：所有渐变向同一方向滚动（右/下） */
            animation: marquee 3s linear infinite;
        }

        @keyframes marquee {
            to {
                background-position: 
                    100% top,    /* 顶部渐变向右移动100% */
                    100% bottom, /* 底部渐变向右移动100% */
                    left 100%,   /* 左侧渐变向下移动100% */
                    right 100%;  /* 右侧渐变向下移动100% */
            }
        }
    </style>
</head>
<body>
    <input type="text" class="gradient-input" placeholder="输入内容...">
</body>
</html>